<template>
  <div style="background:#f3f3f3">
    <header class="mint-header" style="font-size: 18px;">
      <div class="mint-header-button is-left">
        <button class="mint-button mint-button--default mint-button--normal" style="font-size: 15px;" @click="option">
          <span class="mint-button-icon">
            <i class="mintui mintui-back"></i>
          </span>
          <label class="mint-button-text">返回</label>
        </button>
      </div>
      <h1 class="mint-header-title">资金审批</h1>
      <div class="mint-header-button is-right"></div>
    </header>

    <!-- <div style="height:40px" /> -->
    <!-- <div>{{equilist.length}}</div> -->
    <div style="padding:10px 15px;background:#fff">
      <picker :values="moneyData.capitaltype" :picdata="firstarr" class="rd_picker" style="margin-left:-8px;" pictitle="*请款类型:" @getpicval="getpicval" />
      <picker :values="moneyData.childcapitaltype" :picdata="secondarr" class="rd_picker" pictitle="*请款子类型:" style="margin-left:-8px;" @getpicval="getpicval1" />
      <!-- <mt-field label="请款类型:" placeholder="输入请款类型" v-model="usedetail"></mt-field> -->
      <chousebumen :getspl.sync="moneyData.branchid" />
      <mt-field label="*申请时间:" style="margin-left:-8px;">
        <span style="color:#000" @click="addtime">{{ grantime }}</span>
      </mt-field>
      <mt-field v-model="moneyData.amount" style="margin-left:-8px;" label="*申请金额(元):" placeholder="输入申请金额" />
      <mt-field v-model="moneyData.detail" style="margin-left:-8px;" label="*资金用途:" placeholder="输入资金用途" />
      <mt-field v-model="moneyData.beizhu" style="margin-left:-2px;" label="资金备注:" placeholder="输入资金备注" />
      <div style="margin:0 10px;border-top:1px solid #ddd;padding-top:10px;margin-left:5px;">
        <span style="display:block;height:30px">上传附件：</span>
        <div style="width:100%;display:flex;flex-wrap:wrap;">
          <div v-for="(item, index) in filearr1" :key="index" style="width:20%;padding:0 5px;">
            <uploadpic :imagefile.sync="filearr1[index]" />
          </div>
        </div>
      </div>
      <chouseperson :atypeid="'0102'" :num="moneyData.amount" @getspl="getspl" />
    </div>
    <div class="btn_f">
      <mt-button type="default" style="width:100px;margin-right:15px" @click="goback">取消</mt-button>
      <mt-button type="primary" style="width:100px" @click="submitmoney">确定</mt-button>
    </div>

    <div class="datePicker">
      <mt-datetime-picker ref="picker" :start-date="startDate" :visible-item-count="5" type="date" year-format="{value} 年" month-format="{value} 月" date-format="{value} 日" @confirm="handleConfirm" @visible-change="closepicker" />
    </div>
  </div>
</template>
<script>
import nheader from '~/components/nheader.vue'
import uploadpic from '~/components/uploadpic.vue'
import chouseperson from '~/components/chouseperson.vue'
import chousebumen from '~/components/chousebumen.vue'
import picker from '~/components/picker.vue'
export default {
  components: {
    nheader,
    uploadpic,
    chouseperson,
    chousebumen,
    picker
  },
  data () {
    return {
      ts: this.newStore(),
      handler: function (e) {
        e.preventDefault()
      },
      chouseval: '',
      startDate: new Date(),
      popupVisible22: false,
      chousname: [],
      grantime: '',
      aid: '',
      filename: {
        name: '点我上传'
      },
      moneyData: {
        capitaltype: '',
        childcapitaltype: '',
        secondarr: [],
        examinetime: '',
        amount: '',
        detail: '',
        beizhu: '',
        branchid: ''
      },
      firstarr: [],
      secondarr: [],
      usedetail: '',
      carid: '',
      filearr1: [{}, {}, {}, {}, {}],
      shenpi: '',
      dataList: [
        {
          flex: 1,
          values: [],
          className: 'slot1',
          textAlign: 'right'
        }
      ],
      htitle: '资金审批'
    }
  },
  mounted () {
    this.getitem()
    this.grantime = this.formatDate(new Date())
    console.log(this.$route.query.num, '0909')
  },
  computed: {
    summoney () {
      let a = 0
      console.log(this.moneyData, 'sum')
      for (let i = 0; i < this.moneyData.length; i++) {
        a += Number(this.moneyData[i].amount)
      }
      return a
    }
  },
  methods: {
    goback () {
      this.$router.push({ name: 'approval2', query: { name: '申请' } })
    },
    closeTouch () {
      document.getElementsByTagName('body')[0].addEventListener('touchmove', this.handler, { passive: false })//阻止默认事件
    },
    openTouch () {
      document.getElementsByTagName('body')[0].removeEventListener('touchmove', this.handler, { passive: false })//打开默认事件
    },
    closepicker (val) {
      if (val) {
        this.closeTouch()
      } else {
        this.openTouch()
      }
    },
    checksplnum (money2, splid) {
      const req = {
        handle:
          '9000B8B8D347526960C5BAB1FB6894EF3277431D02D636A5015C1425899A1F59A41CF7A197311E4A',
        flowid: splid,
        number: money2
      }
      const p = this.spost(this.ts, '/mainservlet', req).then(ts => {
        if (ts.d.data.operation1[0].hash.cou == '0') {
          this.flag = false
        } else {
          this.flag = true
        }
      })
      return p
    },
    submitmoney () {
      // this.checksplnum(this.moneyData.amount, this.aid).then(() => {
      //   if (this.flag == false) {
      //     this.$message({
      //       type: 'error',
      //       message: ' 审批流不符合条件，请重新选择'
      //     })
      //     return
      //   }
      if (
        this.moneyData.capitaltype == '' ||
        this.moneyData.capitaltype == undefined
      ) {
        this.$messagebox('提示', '请选择请款类型')
        return
      }
      if (
        this.moneyData.childcapitaltype == '' ||
        this.moneyData.childcapitaltype == undefined
      ) {
        this.$messagebox('提示', '请选择请款子类型')
        return
      }
      if (
        this.moneyData.branchid == '' ||
        this.moneyData.branchid == undefined
      ) {
        this.$messagebox('提示', '请选择申请部门')
        return
      }
      if (this.grantime == '' || this.grantime == undefined) {
        this.$messagebox('提示', '请选择申请时间')
        return
      }
      if (this.moneyData.amount == '' || this.moneyData.amount == undefined) {
        this.$messagebox('提示', '请选择申请金额')
        return
      }
      if (this.moneyData.detail == '' || this.moneyData.detail == undefined) {
        this.$messagebox('提示', '请选择资金用途')
        return
      }
      if (this.aid == '' || this.aid == undefined) {
        this.$messagebox('提示', '请选择审批流')
        return
      }
      this.$messagebox
        .confirm('确认提交资金审批?')
        .then(() => {
          const req = {
            handle:
              '9000B8B8D347526960C5BAB1FB6894EF8B7B312373E9BEF47A8517CE4098C19A',
            atype: '0102',
            flowid: this.aid
          }
          this.spost(this.ts, '/mainservlet', req).then(ts => {
            const req2 = this.moneyData
            req2.examinetime = this.grantime
            req2.aid = ts.d.data.operation3[0].hash.approvalid
            req2.handle =
              '40236578C287949E983CF935CC2173FE347A69929FDF7F2FC3D97CC960BDF27C947C61655EDF54FA'
            // req2.capitaltype = this.secone + "-" + this.sectwo;
            req2.bigamount = this.convertCurrency(this.moneyData.amount)
            req2.fileurl = this.posturl(this.filearr1)
            req2.filename = this.postname(this.filearr1)
            this.spost(this.ts, '/mainservlet', req2).then(() => {
              this.$messagebox('提示', '发起资金审批成功！')
              this.$router.push({ name: 'jbrhome', query: { name: '' } })
            })
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    option () {
      this.$router.push({
        name: 'approval2',
        query: {
          name: ''
        }
      })
    },
    posturl (arr) {
      const a = []
      for (let i = 0; i < arr.length; i += 1) {
        a.push(arr[i].url)
      }
      return a
    },
    // 公共方法图片数组转名称数组
    postname (arr) {
      const b = []
      for (let i = 0; i < arr.length; i += 1) {
        b.push(arr[i].name)
      }
      return b
    },
    getspl (val) {
      this.aid = val.id
    },
    getpicval (val) {
      console.log(val)
      this.moneyData.capitaltype = val.showid
      this.getsecondearr(val.showid)
    },
    getpicval1 (val) {
      console.log(val)
      this.moneyData.childcapitaltype = val.showid
    },
    getbumen (val) {
      this.moneyData.branchid = val.orgid
    },
    addqjtime () {
      this.$router.push({
        name: 'jbrtime'
      })
    },
    addqjtime2 () {
      this.$router.push({
        name: 'jbrbxson'
      })
    },
    getitem () {
      const req = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0B167942DD3F1604F9',
        supid: '0505',
        codetype: '05'
      }
      this.spost(this.ts, '/mainservlet', req).then(ts => {
        let a = []

        let item
        for (let index = 0; index < ts.d.data.operation1.length; index += 1) {
          let b = {}
          item = ts.d.data.operation1[index]
          b.showid = item.hash.code_id
          b.showname = item.hash.code_name
          a.push(b)
        }
        this.firstarr = a
        console.log(a, 'this.firstarr')
      })
    },
    getsecondearr (val) {
      // console.log(val,'val');

      this.childcapitaltype = ''
      this.secondarr = []
      const req = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0B167942DD3F1604F9',
        supid: val,
        codetype: '05'
      }
      this.spost(this.ts, '/mainservlet', req).then(ts => {
        let a = []

        let item
        for (let index = 0; index < ts.d.data.operation1.length; index += 1) {
          let b = {}
          item = ts.d.data.operation1[index]
          b.showid = item.hash.code_id
          b.showname = item.hash.code_name
          a.push(b)
        }
        this.secondarr = a
        console.log(a, 'this.firstarr')
      })
    },
    //获取牌照且添加牌照

    //mint时间选择器开始
    addtime () {
      this.$refs.picker.open()
    },
    deletime (index) {
      console.log(index)
      this.timedata.splice(index, 1)
      console.log(this.timedata)
    },
    //时间赋值
    handleConfirm (data) {
      console.log(data)
      this.grantime = this.formatDate(data)
      this.moneyData.examinetime = this.grantime
    },
    //时间选择优化函数
    formatDate (date) {
      const y = date.getFullYear()
      let m = date.getMonth() + 1
      m = m < 10 ? '0' + m : m
      let d = date.getDate()
      d = d < 10 ? '0' + d : d
      return y + '-' + m + '-' + d
    },

    //赋值
    onDateChange (picker, values) {
      //console.log(picker)
      //console.log(values)
      this.chouseval = values
      for (let k = 0; k < this.chousname.length; k++) {
        if (this.chouseval == this.chousname[k].carno) {
          this.chouseid = this.chousname[k].carid
        }
      }
    },
    convertCurrency (money) {
      // 汉字的数字
      const cnNums = new Array(
        '零',
        '壹',
        '贰',
        '叁',
        '肆',
        '伍',
        '陆',
        '柒',
        '捌',
        '玖'
      )
      // 基本单位
      const cnIntRadice = new Array('', '拾', '佰', '仟')
      // 对应整数部分扩展单位
      const cnIntUnits = new Array('', '万', '亿', '兆')
      // 对应小数部分单位
      const cnDecUnits = new Array('角', '分', '毫', '厘')
      // 整数金额时后面跟的字符
      const cnInteger = '整'
      // 整型完以后的单位
      const cnIntLast = '元'
      // 最大处理的数字
      const maxNum = 999999999999999.9999
      // 金额整数部分
      let integerNum
      // 金额小数部分
      let decimalNum
      // 输出的中文金额字符串
      let chineseStr = ''
      // 分离金额后用的数组，预定义
      let parts
      if (money == '') {
        return ''
      }
      money = parseFloat(money)
      if (money >= maxNum) {
        // 超出最大处理数字
        return ''
      }
      if (money == 0) {
        chineseStr = cnNums[0] + cnIntLast + cnInteger
        return chineseStr
      }
      // 转换为字符串
      money = money.toString()
      if (money.indexOf('.') == -1) {
        integerNum = money
        decimalNum = ''
      } else {
        parts = money.split('.')
        integerNum = parts[0]
        decimalNum = parts[1].substr(0, 4)
      }
      // 获取整型部分转换
      if (parseInt(integerNum, 10) > 0) {
        let zeroCount = 0
        const IntLen = integerNum.length
        for (var i = 0; i < IntLen; i++) {
          var n = integerNum.substr(i, 1)
          const p = IntLen - i - 1
          const q = p / 4
          const m = p % 4
          if (n == '0') {
            zeroCount++
          } else {
            if (zeroCount > 0) {
              chineseStr += cnNums[0]
            }
            // 归零
            zeroCount = 0
            chineseStr += cnNums[parseInt(n)] + cnIntRadice[m]
          }
          if (m == 0 && zeroCount < 4) {
            chineseStr += cnIntUnits[q]
          }
        }
        chineseStr += cnIntLast
      }
      // 小数部分
      if (decimalNum != '') {
        const decLen = decimalNum.length
        for (var i = 0; i < decLen; i++) {
          var n = decimalNum.substr(i, 1)
          if (n != '0') {
            chineseStr += cnNums[Number(n)] + cnDecUnits[i]
          }
        }
      }
      if (chineseStr == '') {
        chineseStr += cnNums[0] + cnIntLast + cnInteger
      } else if (decimalNum == '') {
        chineseStr += cnInteger
      }
      return chineseStr
    }
  }
}
</script>
<style scoped>
.mint-field-core {
  text-align: right;
}
.timeright {
  display: inline-block;
  float: right;
}
.timeitem {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.btn_f {
  margin: 10px;
  text-align: center;
}
.qjtime {
  padding: 0 10px;
  line-height: 25px;
}
.qjcolor {
  color: blue;
  display: inline-block;
  float: right;
}
.sbdata {
  margin: 10px;
  line-height: 25px;
}
.delright {
  float: right;
  color: red;
  padding-left: 5px;
}
.picker-center-highlight {
  position: absolute;
  top: 50% !important;
}
.picker-item {
  position: relative;
  top: 35px !important;
}
</style>
